<template>
	<div>
		<div class="Booldetails">
			<div class="nav">
				<div class="nav_left">
					<div class="iconfont icon-fanhui" @click="gettply"></div>
					<span>返回</span>
				</div>
				<div class="nav_centen">
					<p class="centen">书籍详情</p>
				</div>
				<div class="nav_rigth">
					<div class="iconfont icon-shujia" @click="shujia"></div>
					<div class="iconfont icon-home" @click="gettply"></div>
				</div>
			</div>
			<div v-show="showbooks">
				<div class="div" v-for="(data, i) in this.title" :key="i">
					<div class="div_ul">
						<div class="div_ul_left">
							<img
								:src="'http://statics.zhuishushenqi.com' + data.cover + '?imageMogr2/thumbnail/125x160'"
								alt=""
								srcset=""
							/>
						</div>
						<div class="div_ul_rigth">
							<div class="name">{{ data.author }}</div>
							<div class="p">
								<span>{{ data.majorCate }}</span>
								<span>|</span>
								<span>{{ data.majorCateV2 }}</span>
								<span>|</span>
								<span>{{ data.serializeWordCount }}字</span>
							</div>
							<p v-if="!data.allowMonthly">完结</p>
							<p v-else>连载</p>
						</div>
					</div>
				</div>
				<div class="shujia">
					<div class="left" v-show="this.getshow" @click="getbooks()">加入书架</div>
					<div class="left chexiao" v-show="!this.getshow" @click="getRevocation()">撤销书架</div>
					<div class="rigth" @click="reading">开始阅读</div>
				</div>
				<div class="div_renqi">
					<ul v-for="(lists, j) in this.title" :key="j">
						<li>
							<div class="p">追人气</div>
							<div>1.3万</div>
						</li>
						<li>
							<div class="p">读者留存率</div>
							<div>{{ lists.retentionRatio }}%</div>
						</li>
						<li>
							<div class="p">日更字数/天</div>
							<div>26</div>
						</li>
					</ul>
				</div>
				<div class="Book_p">
					<p v-for="(listdata, z) in this.title" :key="z">
						{{ listdata.longIntro }}
					</p>
				</div>
				<div class="Bool_muluo">
					<span>目录</span>
					<div @click="chapter">
						<span>[完结]第2卷新书发布。</span>
						<div class="iconfont "></div>
					</div>
				</div>
				<div class="row_book">
					<div class="p">
						<p>热门书评</p>
					</div>
					<div class="ul">
						<ul>
							<ol v-for="(item, index) in this.lists" :key="index">
								<div class="left">
									<img
										:src="
											'http://statics.zhuishushenqi.com' +
												item.author.activityAvatar +
												'?imageMogr2/thumbnail/125x160'
										"
										alt=""
										srcset=""
									/>
								</div>
								<div class="rigth">
									<p class="name">{{ item.author.nickname }}</p>
									<!-- <div class="hao">超级好看</div> -->
									<!-- <div class="xingxing">>>>>></div> -->
									<p class="buzidao">
										{{ item.title }}
									</p>
									<div class="rigth_ol">
										<div class="ul_left">{{ item.created }}</div>
										<div class="ul_left">{{ item.likeCount }}人觉得有用</div>
									</div>
								</div>
							</ol>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			showlists: '',
			title: [],
			wordCount: '',
			lists: [],
			getshow: true,
			pushwoe: [],
			shelt: [],
			Browse: [],
			listsshelt: '',
			showbooks: false,
		};
	},
	methods: {
		gettply() {
			this.$router.replace('/Male');
			this.$store.commit('showlists', (this.showlists = false));
		},
		getbooks() {
			let boosk_id = localStorage.getItem('boosk_id');
			this.getshow = false;
			if (localStorage.getItem('shelt_id') == null || localStorage.getItem('shelt_id') == '') {
				this.shelt.push({ boosk_id });
				localStorage.setItem('shelt_id', JSON.stringify(this.shelt));
				return;
			}
			(this.shelt = ''), (this.shelt = JSON.parse(localStorage.getItem('shelt_id')));
			this.shelt.push({ boosk_id });
			localStorage.setItem('shelt_id', JSON.stringify(this.shelt));
		},
		getBrowse() {
			let boosk_id = localStorage.getItem('boosk_id');
			// this.Browse = JSON.parse(localStorage.getItem('Browse'))
			if (localStorage.getItem('Browse') == null) {
				this.Browse.push({ boosk_id });
				localStorage.setItem('Browse', JSON.stringify(this.Browse));
				return;
			}
			(this.Browse = ''), (this.Browse = JSON.parse(localStorage.getItem('Browse')));
			this.Browse.push({ boosk_id });
			localStorage.setItem('Browse', JSON.stringify(this.Browse));
		},
		getRevocation() {
			let boosk_id = localStorage.getItem('boosk_id');
			this.getshow = true;
			this.shelt.filter((item, index) => {
				if (item.boosk_id == boosk_id) {
					this.shelt.splice(index, 1);
					localStorage.setItem('shelt_id', JSON.stringify(this.shelt));
					return this.shelt;
				}
			});
		},
		chapter() {
			this.$router.push({
				path: '/Bookdetails/Chapter',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		shujia() {
			this.$router.push({
				path: '/Bookdetails/Bookshelf',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		reading() {
			let Link = localStorage.getItem('Books_Link');
			if (Link == null) {
				let boosk_id = localStorage.getItem('boosk_id');
				// console.log(Link);
				this.$axios.get('http://novel.kele8.cn/book-sources?view=summary&book=' + boosk_id).then((res) => {
					this.$axios.get('http://novel.kele8.cn/book-chapters/' + res.data[0]._id).then((data) => {
						// this.lists = ;
						this.$toast.clear();
						localStorage.setItem('Books_Link', data.data.chapters[0].link);
						this.$router.push({
							path: '/Bookdetails/Browse',
							// name: 'mallList',
							query: {
								mallCode: localStorage.getItem('boosk_id'),
							},
						});
					});
				});
				return;
			}
			this.$router.push({
				path: '/Bookdetails/Browse',
				// name: 'mallList',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
	},
	created() {
		this.getBrowse();
		let boosk_id = localStorage.getItem('boosk_id');
		this.listsshelt = JSON.parse(localStorage.getItem('shelt_id'));
		if (this.listsshelt != null) {
			this.shelt = this.listsshelt;
			this.listsshelt.filter((item) => {
				if (item.boosk_id == boosk_id) {
					return (this.getshow = false);
				}
			});
		}
		this.$store.commit('showlists', (this.showlists = true));
		this.$toast.loading({
			duration: 0,
			forbidClick: true,
			mask: true,
			message: '加载中...',
		});
		this.$axios.get('http://novel.kele8.cn/book-info/' + boosk_id).then((data) => {
			this.title.push(data.data);
			let wordCount = this.title.wordCount > 10000 ? this.title.wordCount / 10000 + '万' : this.title.wordCount;
			this.wordCount = wordCount;
			this.$axios.get('http://novel.kele8.cn/book/discussions?book=' + boosk_id).then((data) => {
				for (var i = 0; i < data.data.posts.length; i++) {
					// console.log(i);
					if (data.data.posts[i].author.activityAvatar != '') {
						let pushwoe = data.data.posts[i];
						this.lists.push(pushwoe);
						this.$toast.clear();
						this.showbooks = true;
					}
				}
			});
		});
	},
};
</script>

<style lang="less" scoped>
.Booldetails {
	width: 640px;
	padding-bottom: 100px;
	.nav {
		width: 640px;
		background-color: #b83320;
		display: flex;
		justify-content: space-between;
		.nav_left {
			flex: 0 0 100px;
			display: flex;
			.iconfont {
				font-size: 30px;
				line-height: 70px;
				color: #fff;
				margin-left: 10px;
			}
			span {
				line-height: 70px;
				color: #fff;
				font-size: 16px;
			}
		}
		.nav_centen {
			flex: 1;
			margin: 15px 0;
			// background: #999;
			display: flex;
			.centen {
				margin: 0 auto;
				color: #fff;
				margin-top: 8px;
				font-size: 18px;
			}
		}
		.nav_rigth {
			flex: 0 0 100px;
			display: flex;
			// background-color: #e9e9e9;
			.iconfont {
				font-size: 28px;
				line-height: 70px;
				margin: 0 auto;
				color: #fff;
			}
			div:nth-child(2) {
				font-size: 35px;
			}
		}
	}
	.div {
		margin: 30px 0;
		.div_ul {
			display: flex;
			width: 90%;
			margin: 0 auto;
			.div_ul_left {
			}
			.div_ul_rigth {
				.name {
					font-size: 26px;
					text-indent: 20px;
				}
				.p {
					margin: 26px 0 20px 20px;
					color: #999;
					span {
						display: inline-block;
						margin-right: 20px;
					}
					span:nth-child(1) {
						color: #b83320;
					}
				}
				p {
					color: #999;
					text-indent: 20px;
				}
			}
		}
	}
	.shujia {
		margin-bottom: 30px;
		display: flex;
		justify-content: space-around;
		div {
			padding: 20px 80px;
			border: 1px solid #b83320;
			color: #b83320;
			font-size: 24px;
			border-radius: 5px;
		}
		.chexiao {
			background-color: #999999;
			color: #fff;
			border: 1px solid #999999;
		}
		.rigth {
			background-color: #b83320;
			color: #fff;
		}
	}
	.div_renqi {
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		padding: 36px 0;
		ul {
			display: flex;
			li {
				width: 33.3%;
				text-align: center;
				line-height: 36px;
				font-size: 20px;
				.p {
					color: #999;
				}
			}
		}
	}
	.Book_p {
		padding: 30px 20px;
		p {
			line-height: 30px;
			color: #555;
		}
	}
	.Bool_muluo {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding: 43px 30px;
		display: flex;
		justify-content: space-between;
		font-size: 20px;
		color: #555;
	}
	.row_book {
		.p {
			padding: 21px 30px;
		}
		.ul {
			width: 90%;
			margin: 0 auto;
			ul {
				width: 100%;
				ol {
					display: flex;
					border-bottom: 1px solid #999;
					padding: 20px 0;
					.left {
						border-radius: 50%;
						img {
							width: 57px;
							height: 57px;
							border-radius: 50%;
						}
					}
					.rigth {
						flex: 1;
						padding: 0 20px;
						// background-color: #ccc;
						.name {
							color: #a58d5e;
							font-size: 14px;
						}
						.hao {
							font-weight: bold;
							padding: 15px 0;
						}
						.xingxing {
							padding-bottom: 17px;
						}
						.buzidao {
							padding-bottom: 42px;
							color: #999999;
						}
						.rigth_ol {
							display: flex;
							justify-content: space-between;
							color: #999999;
						}
					}
				}
			}
		}
	}
}
</style>
